<template>
    <div>
        <!-- header -->
        <div class="chart-header">
            <van-nav-bar :title="sendinfo.fromws.userName" left-text="返回" right-text="" left-arrow
                @click-left="onClickLeft" />
        </div>

        <!-- 循环聊天信息 -->
        <div class="internal-content">
            <chatitem v-for="item in socketCollections[0].content" :message="item" ></chatitem>
        </div>
        <!-- 输入框 -->
        <div class="chart-input">
            <input type="text" v-model="content" />
            <van-button type="info" size="small" @click="sendtows">发送</van-button>
        </div>
    </div>
</template>
<script>
import chatitem from '@/components/chatItem.vue'
import { mapState } from 'vuex';
export default {
    components: {
        chatitem
    },
    data() {
        return {
            sendinfo: {},
            content: '',
        }
    },
    computed: {
        ...mapState(['user','socketCollections']),
        // Realtimerendering(){
        //     this.socketCollections.forEach(item=>{
        //         if(item.fromws&&item.fromws.account ==this.sendinfo.fromws.account){
        //             console.log('1');
        //             // this.sendinfo = item
        //             return item
        //         }
        //     })
        //     return {}
        // }
    },
    methods: {
        onClickLeft() {
            this.$router.push('/home/message')
        },
        sendtows() {
            let chatinfo = {
                fromws: this.user,
                tows: this.sendinfo.fromws,
                timer: new Date(),
                content: this.content
            }
            // console.log(this.Realtimerendering);
            //把本地发送的信息传入仓库中
            this.socketCollections.forEach(item => {
                if(item.fromws&&item.fromws.account === this.sendinfo.fromws.account){
                    // console.log(1233);
                    item.content.push({id:0,content:this.content})
                    return
                }
            });
            if (this.content === '') {
                return
            }
            // console.log(this);
            this.content = ''//清空输入框
            this.$socket.emit('seting',chatinfo)
        }
    },
    beforeMount() {
    this.sendinfo = this.$route.query
    },
}
</script>
<style lang="less">
* {
    margin: 0;
    padding: 0;
}

.chart-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.internal-content {
    margin-top: 50px;
    margin-right: 50px;
}

.chart-input {
    background: rgb(255, 255, 255);
    padding: 5px 10px;
    box-shadow: 0px 20px 14px 16px #888888;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;

    input {
        width: 80vw;
        margin-right: 5px;
    }
}
</style>